<template>
  <div>
    <el-container style="height: 100%;min-height: 1000px; margin: 0">
      <el-aside style="background-color: #ffffff;" :style="'width: '+drawerWidth+'px'">
        <div @click="btn_drawer">
          <i :class="drawerIcon" class="index_side" />
        </div>
        <!--                个人简单信息-->
        <div style="margin: 20% auto 0;" align="center" v-if="!isCollapse">
          <!--                    <el-avatar :size="64" style="font-size: 1.5em">{{user.name}}</el-avatar>-->
          <el-avatar
            :size="64"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <p align="center">{{user.name}}</p>
        </div>
        <!--                功能菜单区-->
        <div style="margin-top: 50px">
          <el-menu
            :unique-opened="true"
            default-active="2"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :collapse-transition="true"
          >
            <!--                        写文章-->
            <el-menu-item index="0" @click="router(0)">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-menu-item index="1" @click="router(1)">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">写文章</span>
            </el-menu-item>
            <!--                        Article-->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>管理文章</span>
              </template>
              <el-menu-item index="1-1" @click="router(2)">全部文章</el-menu-item>
              <el-menu-item index="1-2" @click="router(3)">废纸篓</el-menu-item>
            </el-submenu>
            <!--                        管理分类-->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-fold"></i>
                <span>管理分类</span>
              </template>
              <el-menu-item index="2-1" @click="router(4)">全部分类</el-menu-item>
              <el-menu-item index="2-2" @click="router(5)">添加分类</el-menu-item>
            </el-submenu>
            <!--                        管理标签-->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-claim"></i>
                <span>管理标签</span>
              </template>
              <el-menu-item index="3-1" @click="router(6)">全部标签</el-menu-item>
              <el-menu-item index="3-2" @click="router(7)">添加标签</el-menu-item>
            </el-submenu>
            <!--                        管理评论-->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>管理评论</span>
              </template>
              <el-menu-item index="4-1" @click="router(8)">全部评论</el-menu-item>
            </el-submenu>
            <!--                        管理评论-->
            <el-menu-item index="6" @click="router(9)">
              <i class="el-icon-s-tools"></i>
              <span slot="title">站点设置</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-main style>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
let that;
export default {
  name: "Index",
  data() {
    return {
      isCollapse: false,
      drawerWidth: 300,
      drawerIcon: "el-icon-d-arrow-left",
      user: {}
    };
  },
  methods: {
    //路由管理
    router(e) {
      if (e === 1) {
        that.$router.push("/index/WriteAnEssay");
      } else if (e === 0) {
        that.$router.push("/index/");
      } else if (e === 2) {
        that.$router.push("/index/Article/List");
      } else if (e === 3) {
        that.$router.push("/index/Article/WasteBasket");
      } else if (e === 4) {
        that.$router.push("/index/Classification/List");
      } else if (e === 5) {
        that.$router.push("/index/Classification/Add");
      } else if (e === 6) {
        that.$router.push("/index/Label/List");
      } else if (e === 7) {
        that.$router.push("/index/Label/Add");
      } else if (e === 8) {
        that.$router.push("/index/Comment/List");
      } else if (e === 9) {
        that.$router.push("/index/SiteManagement");
      }
      if (document.documentElement.clientWidth < 769) {
        that.btn_drawer();
      }
    },
    btn_drawer() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.drawerWidth = 64;
        this.drawerIcon = "el-icon-d-arrow-right";
      } else {
        this.drawerWidth = 300;
        this.drawerIcon = "el-icon-d-arrow-left";
      }
    }
  },
  create() {
    console.log(this.$store.state.token);
  },
  created() {
    this.INIT_LOGIN();
    if (document.documentElement.clientWidth < 769) {
      this.btn_drawer();
    }
    console.log(".. .. .");
  },
  mounted() {
    that = this;
    //    获取个人信息
    let token = localStorage.getItem("token").toString();
    that
      .Axios({
        method: "get",
        headers: {
          user_token: token
        },
        url: that.USER_API + "/user-info"
      })
      .then(function(result) {
        that.user = result.data.result;
      });
    // that.$router.push("/index/Home");
  }
};
</script>

<style scoped>
.index_side {
  font-size: 30px;
  float: right;
  margin-right: 17px;
  color: #999999;
  margin-top: 10px;
}
</style>